<!--  -->
<template>
  <div class="menu-container">
    <div class="menu-tabS" v-if="isGroup > 0">
      <div
        v-for="(sysNav, index) in sysNavs"
        :key="index"
        :class="['menu-tab', { active: selectIndex === index }]"
        @click="(subSysNavs = sysNav.children), (selectIndex = index)"
      >
        {{ sysNav.label }}
      </div>
    </div>

    <div class="menu-items">
      <a-row :gutter="[20, 20]" type="flex">
        <a-col :span="4" v-for="(nav, index) of subSysNavs" :key="index">
          <div
            class="menu-item"
            @click.stop="
              specifySys(
                nav.data.sysPath,
                nav.data.sysId,
                nav.data.sysName,
                nav.data.iconImage,
                nav.data.frameType
              )
            "
          >
            <template v-if="nav.data.iconImage.indexOf('iconfont-zhifa') != -1">
              <div class="navImg" :style="nav.data.iconCss | jsonFormatter">
                <span :class="nav.data.iconImage"></span>
              </div>
            </template>

            <template v-if="nav.data.iconImage.indexOf('iconfont-law') != -1">
              <div class="navImg" :style="nav.data.iconCss | jsonFormatter">
                <span :class="nav.data.iconImage"></span>
              </div>
            </template>

            <template
              v-if="
                nav.data.iconImage.indexOf('iconfont-zhifa') == -1 &&
                nav.data.iconImage.indexOf('iconfont-law') == -1
              "
            >
              <div class="navImg" :style="nav.data.iconCss | jsonFormatter">
                <span :class="['iconfont', nav.data.iconImage]"></span>
              </div>
            </template>

            <div class="navspan">
              <span>{{ nav.data.sysName }}</span>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script lang='ts' src='./index.ts'></script>
<style lang='scss' scoped>
@import "./_index.scss";
</style>